import { Division } from 'components';
import React, { useEffect, useRef, useState } from 'react';
import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';

import * as styles from './style';
import { translateSize } from 'styles';

interface IProps {
	style?: ViewStyle
	remarks?: string,
	onConfirm: (remarks: string) => void,
	onCancel: () => void
}

const VoucherRemarks: React.FC<IProps> = props => {

	const [remarks, setRemarks] = useState('');

	useEffect(() => {
		setRemarks(props.remarks)
	}, [props.remarks]);


	return <View style={[styles.container, props.style]}>
		<View style={styles.innerContainer}>
			<ScrollView style={{ flex: 1 }}>
				<View style={{ ...styles.content, borderWidth: 1, borderStyle: "solid", borderColor: '#bbb' }}>
					<TextInput defaultValue={''} onChangeText={(text) => { setRemarks(text) }} style={{}} multiline={true} numberOfLines={6} />
				</View>
			</ScrollView>
			<Division />
			<View style={styles.bottomContainer}>
				<TouchableOpacity onPress={() => {
					props.onConfirm(remarks)
				}}>
					<Text style={styles.comfirm}>确定</Text>
				</TouchableOpacity>
				<TouchableOpacity onPress={() => {
					props.onCancel()
				}}>
					<Text style={styles.cancel}>取消</Text>
				</TouchableOpacity>
			</View>
		</View>
	</View>
}

export default VoucherRemarks

